<script setup>

import { message } from 'ant-design-vue';

const props = defineProps({
  drawerOpen: {
    type: Boolean,
    default: false,
  },
});

const assignModalVisible = ref(false);
const assignObj = reactive({
  currentPeople: [],
  roomArea: 0,
  assignArea: 0,
});

const isBack = ref(false);
const emits = defineEmits(['assign']);
const fatherData = inject('fatherData');

const assignPeopleList = ref([
  {
    value: '张三',
    area: 0,
  },
  {
    value: '李四',
    area: 0,
  },
  {
    value: '王五',
    area: 0,
  },
  {
    value: '赵六',
    area: 0,
  },
  {
    value: '孙七',
    area: 0,
  },
  {
    value: '周八',
    area: 0,
  },
  {
    value: '吴九',
    area: 0,
  },
  {
    value: '郑十',
    area: 0,
  },
]);

const assignOperation = () => {
  if (isBack.value) {
    emits('assign', {
      type: 'back',
    });
  } else {
    message.info('点击房间分配人员');
    emits('assign', {
      isRoomView: false,
    });
  }
  isBack.value = !isBack.value;
};

const listenSelectPeople = computed(() => {
  let totalArea = 0;
  assignObj.currentPeople.forEach(item => {
    const people = assignPeopleList.value.find(p => p.value === item);
    totalArea += people.area;
  });
  assignObj.assignArea = parseFloat(totalArea.toFixed(2));
  return assignPeopleList.value.map(item => ({
    ...item,
    disabled: (totalArea + item.area > assignObj.roomArea + 1) && !assignObj.currentPeople.includes(item.value)
  })) || [];
});

const handleAssignOk = () => {
  if (!assignObj.currentPeople.length) {
    message.warning('请选择人员');
    return;
  }
  const assignFeature = fatherData.currentRowData.data.features.find(item =>
      item.properties.id === fatherData.assignFeature.properties.id);
  if (!assignFeature) return;
  assignFeature.properties.areaMax = assignObj.assignArea >= assignObj.roomArea;
  assignFeature.properties.currentPeople = assignObj.currentPeople;
  fatherData.assignSuccessData = assignFeature;
  message.success('分配成功');
  assignModalVisible.value = false;
};

watch(() => fatherData.assignFeature, (newVal) => {
  if (newVal) {
    assignModalVisible.value = true;
    assignObj.currentPeople = JSON.parse(newVal.properties.currentPeople) || [];
    assignObj.roomArea = parseFloat(newVal.properties.area);
    const areaList = JSON.parse(newVal.properties.areaList);
    assignPeopleList.value.forEach((item, index) => {
      item.area = areaList[index];
    });
  }
});

// 抽屉状态
watch(() => props.drawerOpen, (newValue) => {
  if (newValue) isBack.value = false;
});
</script>

<template>
  <div class="assign-container">
    <a-button type="link" @click="assignOperation">{{ isBack ? '返回分配' : '分配使用人' }}</a-button>
    <a-modal
        v-model:open="assignModalVisible"
        centered
        :width="600"
        okText="确认"
        cancelText="取消"
        @ok="handleAssignOk"
    >
      <a-descriptions title="分配人员" bordered :labelStyle="{padding:'10px 15px'}">
        <a-descriptions-item label="当前人数">
          <a-tag color="green">{{ assignObj.currentPeople.length }}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="房间面积">
          <a-tag color="orange">{{ assignObj.roomArea }}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="已分配面积">
          <a-tag color="cyan">{{ assignObj.assignArea }}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="分配人员" :span="3">
          <a-select
              v-model:value="assignObj.currentPeople"
              placeholder="选择人员进行分配"
              :style="{width: '400px'}"
              mode="multiple"
              showSearch
          >
            <a-select-option v-for="item in listenSelectPeople" :disabled="item.disabled" :key="item.value">
              {{ item.value }}: {{ item.area }}㎡
            </a-select-option>
          </a-select>
        </a-descriptions-item>
      </a-descriptions>
    </a-modal>
  </div>
</template>

<style scoped>
.assign-container {
  margin: 0 auto;
}
</style>
